import 'package:flutter/material.dart';
import 'package:logger/logger.dart';
import 'package:heart_friend/page/login/phone_login.dart';

class Login extends StatefulWidget {
  const Login({super.key});

  @override
  State createState() => _StateLogin();
}

class _StateLogin extends State<Login> {
  late TextEditingController _name_controller;
  late TextEditingController _pwd_controller;
  late Logger _logger;
  bool? checkboxSelected = false;

  @override
  void initState() {
    super.initState();
    _logger = Logger(printer: PrettyPrinter(methodCount: 0));
    _name_controller = TextEditingController();
    _pwd_controller = TextEditingController();
  }

  @override
  void dispose() {
    _name_controller.dispose();
    _pwd_controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final ButtonStyle buttonStyle = ElevatedButton.styleFrom(
        foregroundColor: Colors.redAccent,
        minimumSize: const Size(300, 60),
        shape: const RoundedRectangleBorder(),
        textStyle: const TextStyle(fontSize: 30, color: Colors.red));

    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("登录"),
      ),
      resizeToAvoidBottomInset: false,
      body: Align(
        child: Column(
          // Column is also a layout widget. It takes a list of children and
          // arranges them vertically. By default, it sizes itself to fit its
          // children horizontally, and tries to be as tall as its parent.
          //
          // Column has various properties to control how it sizes itself and
          // how it positions its children. Here we use mainAxisAlignment to
          // center the children vertically; the main axis here is the vertical
          // axis because Columns are vertical (the cross axis would be
          // horizontal).
          //
          // TRY THIS: Invoke "debug painting" (choose the "Toggle Debug Paint"
          // action in the IDE, or press "p" in the console), to see the
          // wireframe for each widget.
          children: [
            const SizedBox(
              height: 100,
            ),
            Image.asset('images/img_header.png', height: 60, width: 60),
            const SizedBox(
              height: 20,
            ),
            const Text(
              '心友',
              style: TextStyle(
                  color: Colors.red, fontWeight: FontWeight.bold, fontSize: 28),
            ),
            SizedBox(
              width: double.infinity,
              child: Padding(
                  padding: const EdgeInsets.fromLTRB(20.0, 20.0, 20.0, 20.0),
                  child: ElevatedButton(
                      onPressed: () {
                        //导航到新路由
                        Navigator.push(context,
                            MaterialPageRoute(builder: (context) {
                          return PhoneLogin();
                        }));
                      },
                      style: ElevatedButton.styleFrom(
                          primary: Colors.blue,
                          onPrimary: Colors.red,
                          padding: const EdgeInsets.all(10), //内间距
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(6))),
                      child: const Text(
                        '手机号码登录',
                        style: TextStyle(color: Colors.white, fontSize: 20),
                      ))),
            ),
            const Text(
              '其它方式登录',
              style: TextStyle(
                  color: Colors.grey,
                  fontWeight: FontWeight.normal,
                  fontSize: 20),
            ),
            Image.asset('images/img_wechat.png', height: 60, width: 60),
            Padding(
                padding: const EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
                child: Row(children: [
                  _colorfulCheckBox(),
                  const Expanded(
                    child: Text.rich(TextSpan(children: [
                      TextSpan(
                          text: '我已认证阅读并同意',
                          style: TextStyle(fontSize: 12, color: Colors.black)),
                      TextSpan(
                          text: '<<联通统一认证服务条款>>',
                          style: TextStyle(fontSize: 12, color: Colors.blue)),
                      TextSpan(
                          text: '和',
                          style: TextStyle(fontSize: 12, color: Colors.black)),
                      TextSpan(
                          text: '<<服务协议>>.<<隐式政策>>',
                          style: TextStyle(fontSize: 12, color: Colors.blue)),
                      TextSpan(
                          text: '并授权交友获取手机号,手册登录将自动注册',
                          style: TextStyle(fontSize: 12, color: Colors.black)),
                    ])),
                  )
                ])),
          ],
        ),
      ),
    );
  }

  Checkbox _colorfulCheckBox() {
    return Checkbox(
        value: checkboxSelected,
        activeColor: Colors.red,
        checkColor: Colors.green,
        onChanged: (value) {
          setState(() {
            checkboxSelected = value;
          });
        });
  }
}
